<template > 
    <div class="myContract"> 
        <div class="listCon">
            <div class="lists" v-for="(it,idx) in list" :key = "idx">
                
                <div class="con" v-for="(t,k,i) in keys" :key = "i">
                    <div class="con_label">
                        {{ t }}
                    </div>
                    <div class="con_val">
                    {{ k == 'deal_time'?`${it[k]} ~ ${it['end_time']}`:k=='sign_status'?it[k] == 1?'已签名':'未签名' :keyFun(it,k) }}
                    </div>
                </div>
                <div class="tag">
                    {{ it.fuwu_status }}
                    <!-- {{ tagText(it.end_time) }} -->
                </div>
                <div class="qr">
                    <!-- <img v-if="it.sign_status == 0" src="" alt=""> -->
                    <!-- <div class="btn" @click = "digShow(it)">
                        查看协议
                    </div> -->
                    <div ref="qrDom" :id = "'qrDom'+idx"></div>
                    <div @click = "to(it)" style="margin-top: 12px;">
                        {{ it.sign_status==0?`扫码签名`:it.pact_id?'扫码查看':'' }}
                    </div>
                </div>
            </div>
        </div>
        <div class="pagination" v-if="total!=0">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="size"
                layout="prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog :show-close="false" title="预览"
            :visible="dig" width="80%"  destroy-on-close>
            <div class="dig">
                <div v-html="digData.content"></div>
                <div class="qrCode">
                    <img v-if="digData.signature == 1" :src="digData.image" alt="">
                    <div v-else>

                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer ">
                <el-button size="small" @click="dig = false">关闭</el-button>
                <!-- <div class="btn">
                    <el-button size="small" @click="submitClick">提交</el-button>
                </div> -->
            </span>
        </el-dialog>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2';
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "tem",
        mixins: [pagePublic],
        data(){
            return{
                dig:false,
                digData:{},
                page:1,
                size:10,
                total:0,
                keys:{
                    'student.name':'姓名：',
                    'student.sex':'性别：',
                    'student.mobile':'手机号码：',
                    name:'合同标题：',
                    'goods.name':'商品：',
                    'goods.subject':'科目：',
                    'deal_time':'服务时长：',
                    'create_time':'录入时间：',
                    'adminuser.banzhuren':'业务老师：',
                    'sign_status':'签名状态：'

                },
                list:[],
                form:{},
                formData:{},
                rules:{},
                disabled:false,

                
                // urls:{
                //     list: {
                //         url:this.$api.tem.list,
                //         method:"get",
                //         sync:false,
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        computed: {
            ...mapState(['configInfo']),

        },
        created() {
            
        },
        mounted() {
            
        },
        methods:{
            ...mapMutations(['set_configInfo']),
            handleCurrentChange(e){

            },
            setValue(form,formData,rules,disabled,key){

                this.$nextTick(()=>{
                    this.form = form
                    this.formData = JSON.parse(formData);
                    console.log(this.formData,'qxxxxxxxxxxxx)');
                    this.rules = rules
                    console.log(this.formData,disabled,this.form,this.rules,3333333)
                    this.disabled = disabled == 'details'?true:false;
                    console.log(1111)

                    this.getList1()
                })
            },
            getList1(){
                this.$api.study.myContract.list().then(res=>{
                    this.list = res.data.data
                    this.total = res.data.total
                    console.log(1111)
                    setTimeout(()=>{
                        this.bindQRCode()
                    },300)

                })
            },
            tagText(e){
                if(e){
                    let time1 = new Date().getTime()
                    let time2 = new Date(e).getTime()
                    return Number(time2)>Number(time1)?'服务中':'已结束'
                }else{
                    return '服务未开始'
                }
                
            },
            keyFun(t,k){
                let ks = k.split('.');
                return ks&&ks[1]?t[ks[0]][ks[1]]:t[ks[0]]
            },
            digShow(t){
                this.digData = t
                this.dig = true
            },
            bindQRCode(){
                // console.log("QRCode",QRCode)
                let doms = {}
                this.list.map((e,i)=>{
                    let qrDom = document.getElementById('qrDom'+i);
                    console.log(e,i,333)
                    if(e.contract_id){
                        new QRCode(qrDom, {
                            text: `http://www.zhongchenjiaoyu.com/agreement/${3}/${e.pact_id}/${e.contract_id}`,
                            width: 100,
                            height: 100,
                            colorDark: "#ff6868", //二维码颜色
                            colorLight: "#ffffff", //二维码背景色
                            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                        })
                    }
                    
                })
                
            },
            to(t){
                this.$router.push(`/agreement/${this.$store.state.company_id}/${t.pact_id}/${t.contract_id}`)
            }
        }
    }
</script>
<style lang="scss" scoped>
.myContract{
    width: 100%;
    height: 100%;
    .listCon{
        display: flex;
        flex-direction: column;
        align-items: center;
        .lists{
            width: 100%;
            display: flex;
            flex-direction: column;
            // align-items: center;
            padding: 30px 30px;
            border-radius: 12px;
            background-color: #fff;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 32px;
            overflow: hidden;
            .con{
                height: 20px;
                display: flex;
                align-items: center;
                padding: 10px 0;
                // border-bottom: 1px solid #eee;
                // border-radius: 12px;
                // background-color: #fff;
                // position: relative;
                font-size: 20px;
                .con_label{
                    width: 100px;
                    text-align: right;
                    color: #a5a5a5;
                }
                .con_val{
                    flex: 1;
                    text-align: left;
                    color: #333;

                }
            }
            .tag{
                position: absolute;
                top: 20px;
                right: -58px;
                width: 200px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #fff;
                // transform: scaleY(45deg);
                transform: rotate(45deg);
                background-color: var(--bg-color,'#FF6900');
            }
            .qr{
                position: absolute;
                bottom: 50px;
                right: 30px;
                width: 100px;
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                #qrDom{
                    width: 100px;
                    height: 100px;
                }
                img{
                    width: 100%;
                    height: 100%;
                }
                .btn{
                    // margin-top: -20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 150px;
                    height: 40px;
                    border-radius:30px;
                    color: #fff;
                    cursor:pointer;
                    background-color: var(--bg-color,'#FF6900');
                }
            }
        
        }
        
    }
    .pagination{
        width: 100%;
        // align-items: center;
        padding: 30px 30px;
        border-radius: 12px;
        background-color: #fff;
        box-sizing: border-box;
        margin-bottom: 32px;
        margin-top: 32px;
        display: flex;
        ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
            background-color: var(--bg-color,'#FF6900');
        }
        ::v-deep .el-pagination.is-background .el-pager li:not(.active):hover {
            color: var(--bg-color,'#FF6900');
        }
    }
    .dig{
        width: 100%;
        // height: 100%;
        padding: 30px;
        box-sizing: border-box;
        // position: relative;
        .qrCode{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            img{
                width: 200px;
                height: 100%;
            }
        }
        
    }
}
</style>